<template>
    <div class="goods-list">
        <div class="goods" v-for="item in list" :key="item.id_goods" @click="handleClick">
            <!-- 商品图片 -->
            <div>
                <img :src="item.image" alt="">
            </div>
            <!-- 商品名称 -->
            <p>{{item.pro_name}}</p>
            <!-- 优惠券 -->
            <div id="vip">
                <span>满300减30</span>
                <span>店铺领券</span>
            </div>
            <!-- 价格 -->
            <b>￥{{item.price}}</b>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list:[]
                // props:["data"]
            }
        },
        async mounted() {
            let result=await this.$http2.get({
                url:'/hotshow',
                params:{}
            })
            this.list=result.data.hot
            console.log(result);
        },
        methods: {
            handleClick(){
                this.$router.push('./details')
            }
        },
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/ellipsis.styl';
.goods-list
    display flex
    flex-wrap wrap
    // height 2000px
.goods
    width 165px
    height 260px
    background-color #fff
    margin-left 15px
    margin-top 15px
    border-radius 5px
    padding 5px 5px
    >div:first-child
        width 155px
        height 155px
        >img
            width 100%
            height 100%
            border-radius 5px
    >p
        width 165px
        ellipsis(100%,2)
    >#vip
        width 175px
        height 18px
        color #9d8f82
        display flex
        margin-top 5px
        >span
            display block
            height 18px
            border 1px solid #9d8f82
            text-align center
            line-height 18px
    >b
        margin-top 5px
        display block
</style>
